<!DOCTYPE html>
<html lang="zh">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>哲学史</title>

    <link href="main.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="main.css">

    <script src="https://openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="lib/mxn/mxn.js?(openlayers)"></script>
    <script src="lib/timeline-2.3.0.js" type="text/javascript"></script>
    <script src="src/timemap.js" type="text/javascript"></script>
    <script src="src/manipulation.js"></script>

    <script type="text/javascript">
        var tm;

        function getYear() {
            var myDate = new Date();
            var year = String(myDate.getFullYear());
            return year;
        }
        $(function () {
            TimeMap.loaders.custom = function (options) {
                var loader = new TimeMap.loaders.remote(options);
                loader.parse = JSON.parse;
                loader.preload = function (data) {
                    return data["results"]
                };
                loader.transform = function (data) {
                    return {
                        "title": data.title,
                        "start": data.start,
                        "end": (data.end == 'now') ? getYear() : data.end,
                        "options": {
                            "infoHtml": '<div class="infoHtml"><img src="' + data.pic + '">' +
                                data.description + '<p><a href="' + data.url + '">更多信息</a></p></div>'
                        },
                        "point": {
                            "lat": data.Lat,
                            "lon": data.Lon,
                        }
                    };
                };
                console.log(getYear());
                return loader;
            };
            tm = TimeMap.init({
                mapId: "map", // Id of map div element (required)
                timelineId: "timeline", // Id of timeline div element (required) 
                options: {
                    eventIconPath: "../images/"
                },
                datasets: [{
                        id: "china-dynasty",
                        title: "中国历史时期",
                        type: "custom",
                        theme: "red",
                        options: {
                            // json file
                            url: "ChinaDynasty.json"
                        }
                    },
                    {
                        id: "chinese",
                        title: "中国历史人物",
                        type: "custom",
                        theme: "green",
                        options: {
                            // json file
                            url: "chinese.json"
                        }
                    },
                    {
                        id: "europe-history",
                        title: "欧洲历史",
                        type: "custom",
                        theme: "blue",
                        options: {
                            // json file
                            url: "EuropeHistory.json"
                        }
                    },
                    {
                        id: "western",
                        title: "西方历史人物",
                        type: "custom",
                        theme: "purple",
                        options: {
                            // json file
                            url: "western.json"
                        }
                    }
                ],
                bandIntervals: [
                    Timeline.DateTime.CENTURY,
                    Timeline.DateTime.MILLENNIUM
                ],
                scrollTo: 'latest'
            });
        });

        function toggleDataset(dsid, toggle) {
            if (toggle) {
                tm.datasets[dsid].show();
            } else {
                tm.datasets[dsid].hide();
            }
        }

    </script>

</head>

<body>
    <div id="help">
        <h1>哲学史</h1>
        <p>通过对时间、地理数据的可视化处理，建立人文知识的时空框架。</p>
        <p>Show:&nbsp;
            <span id="china-dynasty-box"><input type="checkbox" onclick="toggleDataset('china-dynasty', this.checked);"
                    checked>中国朝代</span>
            <span id="chinese-box"><input type="checkbox" onclick="toggleDataset('chinese', this.checked);" checked>中国人物</span>
            <span id="europe-history-box"><input type="checkbox" onclick="toggleDataset('europe-history', this.checked);"
                    checked>欧洲历史</span>
            <span id="western-box"><input type="checkbox" onclick="toggleDataset('europe-history', this.checked);"
                    checked>西方人物</span>
        </p>
    </div>
    <div id="timemap">
        <div id="timelinecontainer">
            <div id="timeline"></div>
        </div>
        <div id="mapcontainer">
            <div id="map"></div>
        </div>
    </div>
</body>

</html>
